<template>
<div class="main">
    <div class="block">
    <el-slider
      v-model="value"
      range
      :show-tooltip = true
      :max="50000"
      :format-tooltip = formatTooltip
      tooltip-class='aaa'
      >
    </el-slider>
    <div class="left">￥{{valLeft}}</div>
    <div class="right">￥{{valRight}}</div>
  </div>
</div>
    
</template>

<script>
    export default {
    data() {
      return {
        value: [0, 6000],
        // marks: {
        //   0: '0°C',
        //   8: '8°C',
        //   37: '37°C',
        //   50: {
        //     style: {
        //       color: '#1989FA'
        //     },
        //     label: this.$createElement('strong', '50%')
        //   }
        // },
        valRight:null,
        valLeft:null
      }
    },
    mounted() {
        // var aa = document
        this.$nextTick(() => {
                this.tian();
               
            })
         
    },
    watch:{
        value(value){
            // console.log(value,"valuevalue");
            this.valRight = value[1]
            this.valLeft = value[0]
            // let demos = document.getElementsByClassName('el-slider__button-wrapper')
            // console.log(demos,'demos1');
            // console.log(demos[1].style.left,'demosdemosdemos');
        }
    },
    methods: {
        formatTooltip(){
            // console.log(val,'valvalval');
            // return `￥${val}`
            console.log(this.value,'valuevaluevalue1');
            this.$nextTick(() => {
                this.tian();
               
            })
        },
        // 
        tian(){
            // let demos = document.getElementsByClassName('aaa')
            // console.log(demos,'demos');
            let demos = document.getElementsByClassName('el-slider__button-wrapper')
            let left1 = demos[0].style.left
            let left2 = demos[1].style.left
            // console.log(demos,'demos1');
            // console.log(demos[1].style.left,'demosdemosdemos');
            let right = document.getElementsByClassName('right')
            right[0].style.left = `calc(${left2} - 30px)`

            let left = document.getElementsByClassName('left')
            left[0].style.left = `calc(${left1} - 30px)`

            console.log(right.X,left,'789456');
        }
    },
  }
</script>

<style scoped>
.main{
    margin: 0 auto;
    width: 80%;
}
.block{
    position: relative;
    
}
.right,.left{
    position:absolute;
    padding: 3px;
    border-radius: 5px;
    width: 60px;
    height: 20px;
    line-height: 20px;
    color: aliceblue;
    text-align: center;
    background: red;
    top: -20px;
}

/* .slider__button-wrapper{
    position: relative;
}
::v-deep .slider__button-wrapper::before{
    content:'22' !important;
    width: 20px !important;
    height: 20px !important;
    background: red !important;
    top: 0 !important;
    left: 20px !important;
}
.aaa{
    display: block !important;
} */
</style>